<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户购物车</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="stylesheet" href="/css/template.css">
    <link rel="stylesheet" href="/assets/bootstrap-3.3.5/css/bootstrap.css">
    <style>
        .layui-form-label {
            width: auto;
        }

        body {
            background-color: #f2f2f2
        }

        #goodsOrderDetailHead {
            height: auto;
            font-size: 15px;
        }
    </style>
</head>
<body>
<!--表头-->
<div class="layui-form" id="" style="background-color: #f2f2f2;margin-top:16px">
    <div class="layui-form-item">
        <label class="layui-form-label">选择订单状态</label>
        <div class="layui-input-inline">
            <select name="mode_distribution" id="orderStatus">
                <option selected>所有状态</option>
                <option value="1">代发货</option>
                <option value="2">配送中</option>
                <option value="3">待取货</option>
                <option value="4">已完成</option>
            </select>
        </div>
        <button class="query option layui-btn layui-btn-radius layui-btn-normal" lay-filter="option" id="query">查询
        </button>
    </div>
</div>
<table class="layui-hide" id="orderGoodsTable" lay-filter="orderGoodsTable"></table>
<div class="layui-row layui-col-space15 detail" id="detail" style="border: 0px;background-color: #f2f2f2;">
    <!--左-->
    <div class="layui-form"style="background-color: #f2f2f2;margin-top:16px">
        <div class="layui-form-item" style="background-color: #f2f2f2">
            <label class="layui-form-label">选择订单状态</label>
            <div class="layui-input-inline">
                <select name="mode_distribution" id="detailStart">
                    <option value="2">配送中</option>
                    <option value="4">已完成</option>
                </select>
            </div>
            <button class="modifyStart layui-btn layui-btn-radius layui-btn-normal" lay-filter="option"
                    id="modifyStart">修改状态
            </button>
        </div>
    </div>
    <div class="layui-col-md6" style="border: 0px; background-color: #f2f2f2">
        <div class="layui-card" style="border: 0px">
            <div class="layui-card-header goodsOrderDetailHead" id="goodsOrderDetailHead"style=" background-color: #f2f2f2"></div>
            <div class="layui-card-body goodsOrderDetail" id="goodsOrderDetail" style="font-size: 15px; background-color: #f2f2f2"></div>
        </div>
    </div>
</div>
<script src="/layui/layui.all.js"></script>
<script>
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        $('#detail').hide();
        //方法级渲染
        table.render({
            elem: '#orderGoodsTable',
            url: '/goodsOrder/selectOrder',
            cols: [
                [{
                    title: '序号',
                    type: 'numbers'
                }, {
                    title: '订单号',
                    field: 'one_order',
                    align: 'center',
                }, {
                    title: '用户名',
                    field: 'username',
                    align: 'center',
                }, {
                    title: '配送方式',
                    field: 'mode_distribution',
                    align: 'center',
                }, {
                    title: '订单状态',
                    templet: function (d) {
                        switch (d.order_status) {
                            case 0:
                                return '退单';
                            case 1:
                                return '代发货';
                            case 2:
                                return '配送中';
                            case 3:
                                return '待取货';
                            case 4:
                                return '已完成';
                        }
                    },
                    field: 'order_status',
                    align: 'center',
                }, {
                    title: '联系电话',
                    field: 'phone',
                    align: 'center',
                }, {
                    title: '地址',
                    field: 'address',
                    align: 'center',
                }, {
                    title: '下单时间',
                    field: 'order_time',
                    align: 'center',
                }],
            ],
            page: true
        });
        $.ajax({
            url: "/goodsOrder/isUser",
            method: "POST",
            success: function (data) {
                if (data.data == 'isUser') {
                    $('#modifyStart').hide();
                } else if (data.data == 'noUser') {
                    $('#modifyStart').show();
                }
            }
        })
        /**
         * 监听查询事件
         */
        $('#query').on('click', function () {
            var orderStatus = $('#orderStatus').val();
            if (orderStatus == '所有状态') {
                orderStatus = null;
            }
            table.reload('orderGoodsTable', {
                url: '/goodsOrder/selectOrder',
                where: {'order_status': orderStatus}
            });
        })
        var one_order = '';
        /**
         * 监听修改状态按键
         */
        $('#modifyStart').on('click', function () {
            //下拉列表选中的对象值
            var start = $('#detailStart option:selected').text();
            var detailStart = $('#detailStart').val();
            $.ajax({
                url: "/goodsOrder/updateOrder",
                data: {
                    'one_order': one_order,
                    'order_status':$('#detailStart').val()
                },
                method: "POST",
                success: function (data) {
                    $('#start').html(start);
                    layer.msg(data.msg);
                },
                error: function () {
                    layer.msg("修改订单失败")
                }
            })
        })

        /**
         * 监听行点击事件
         */
        table.on('row(orderGoodsTable)', function (obj) {
            var data = obj.data;
            console.log(JSON.stringify(data));
            one_order = data.one_order;
            console.log("one_order:" + one_order);
            var orderDetail = '';
            var orderPrice = 0;
            $.ajax({
                url: "/goodsOrder/selectOrderDetail",
                data: {'one_order': one_order},
                method: "POST",
                success: function (data) {
                    for (var goods in data.data) {
                        orderDetail += loadOrderDetail(data.data[goods])
                        orderPrice += data.data[goods].order_price;
                    }
                    $('#goodsOrderDetail').html(orderDetail);
                    $('#goodsOrderDetailHead').html(goodsOrderDetailHead(data.data[0]) + '<span class="goodsName">订单总价:' +
                        orderPrice + '</span><br>' +
                        '<hr style="border:1px;background-color:blue;height:1px;">')
                }
            })
            layer.open({
                type: 1,
                title: '<a>订单详情</a>',
                area: ['95%', '90%'],
                shadeClose: true, //点击遮罩关闭
                content: $('#detail'),
                end: function () {
                    table.reload('orderGoodsTable');
                    // location.reload();
                }
            });
        });

        /**
         * 加载商品详情
         */
        function loadOrderDetail(goods) {
            return '<img src="' + goods.goods_image + '" alt="商品图片"><br>' +
                ' <span class="goodsName">品名:' + goods.goods_name + '</span><br>' +
                ' <span class="goodsName">单价:' + goods.goods_price + '</span><br>' +
                '<span class="goodsColor">颜色:' + goods.goods_color + '</span><br>' +
                ' <span class="goodsUseMethod">用法:' + goods.useMethod + '</span><br>' +
                ' <span class="goodsRemark">说明:' + goods.remark + '</span><br>' +
                ' <span class="goodsRemark">数量:' + goods.goods_count + '</span><br>' +
                '<hr style="border:1px;background-color:green;height:1px;">'
        }

        /**
         * 加载订单详情的公共部分
         * @param goods
         */
        function goodsOrderDetailHead(goods) {
            return '<span class="goodsName">订单号:' + goods.one_order + '</span><br>' +
                '<span class="goodsName">订单人:' + goods.username + '</span><br>' +
                '<span class="goodsName">配送方式:' + goods.mode_distribution + '</span><br>' +
                '<span class="goodsName">订单状态:<span class="start" id="start">' + getOrderStart(goods.order_status) +
                '</span></span><br>'
            if (goods.phone != undefined) {
                +'<span class="goodsName">联系电话:' + goods.phone + '</span><br>'
            }
            if (goods.address != undefined) {
                +'<span class="goodsName">地址:' + goods.address + '</span><br>'
            }
        }

        /**
         * 根据数字得到订单状态
         * @param startNumber
         * @returns {string}
         */
        function getOrderStart(startNumber) {
            switch (startNumber) {
                case 0:
                    return '退单';
                case 1:
                    return '代发货';
                case 2:
                    return '配送中';
                case 3:
                    return '待取货';
                case 4:
                    return '已完成';
            }
        }
    })
</script>
</body>
</html>